<template>
  <div class="choose">
      <div class="check">
          <el-checkbox v-model="chooseData.choose" :label="chooseData.name" @change="chooseAll" border></el-checkbox>
      </div>
      <div>
           <el-tag v-for="(item,i) in chooseData.children" :key="i" @click="chooseItem(i)" :type="item.choose?'success':'info'">{{item.name}}</el-tag>
      </div>
  </div>

</template>

<script lang="ts">
import { Options, Vue } from 'vue-class-component';

import { getCurrentInstance,ref ,reactive} from 'vue';


@Options({
  props: {
    chooseData:Object
  }
})
export default class ChooseM extends Vue {
  chooseData!:any
  data(){
    return { //必须返回 模板中才能使用
      changeDisabled:false
    }
  }
  chooseAll(val:Boolean){
     this.chooseData.children.map((item:any)=>{
      item.choose = val;
    })
  }
  chooseItem(i:number){
     this.chooseData.children[i].choose = !this.chooseData.children[i].choose;
     if(this.chooseData.children.filter((item:any)=>item.choose).length==0){
       this.chooseData.choose = false;
     }else if(this.chooseData.children.filter((item:any)=>item.choose).length==this.chooseData.children.length){
       this.chooseData.choose = true;
     }

     
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">

</style>
